import { Shape } from '@antv/x6';
import labelIcon from '../images/label.png';

const portAttrs = {
  circle: {
    r: 4,
    magnet: true,
    stroke: '#31d0c6',
    strokeWidth: 2,
    fill: '#fff',
    style: {
      visibility: 'hidden',
    },
  },
};

export default Shape.Rect.define({
  width: 100,
  height: 40,
  zIndex: 100,
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'text',
      selector: 'label',
    },
    {
      tagName: 'image',
      selector: 'icon'
    }
  ],
  attrs: {
    label: {
      text: '普通节点',
      fill: "#FF7A0B",
      strokeWidth: 0.4,
      fontSize: 12,
    },
    body: {
      stroke: "#FF7C0E",
      strokeWidth: 1,
      rx: 5,
      ry: 5
    },
    icon: {
      'xlink:href': labelIcon,
      width: 20,
      height: 20,
      refX: 1,
      refY: 1
    }
  },
  ports: {
    items: [
      { group: 'port_top', id: 'p_top' },
      { group: 'port_right', id: 'p_right' },
      { group: 'port_bottom', id: 'p_bottom' },
      { group: 'port_left', id: 'p_left' },
    ],
    groups: {
      port_top: {
        attrs: portAttrs,
        position: 'top',
      },
      port_right: {
        attrs: portAttrs,
        position: 'right',
      },
      port_bottom: {
        attrs: portAttrs,
        position: 'bottom',
      },
      port_left: {
        attrs: portAttrs,
        position: 'left',
      },
    },
  },
});
